import React from 'react';
import {Form, Row} from 'antd';
import {injectIntl} from 'react-intl';
import PickCity from '../../components/pickCity/pickCity';
import {connect} from "react-redux";
import {actioncityposition} from '../../redux/position/position.redux.js';
import axios from 'axios';
import {MP} from "../../utils/map";

const createForm = Form.create;

@connect(state => state.position, {actioncityposition})
class stationMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            params: [],
        }
        this.count = 0;

    }

    componentWillReceiveProps(nextProps) {
        console.log('nextProps',nextProps);
        if (nextProps.cityPosition && nextProps.cityPosition.length > 0) {
            this.getStubGroupByMap(nextProps.cityPosition)
        }
    }

    componentDidMount() {
        MP().then((AMap)=>{
            this.setState({
                map: new AMap.Map(this.refs.map, {
                    zoom: 4,//级别
                })
            },()=>{this.getStubGroupByMap()})
        });
    }

    freshMap = (nextProps,data) => {
        console.log(data)
        let lnglats = nextProps.map((item) => {
            return [item.gisGcj02Lng, item.gisGcj02Lat]
        })
        //实例化窗口
        let infoWindow = new window.AMap.InfoWindow({offset: new window.AMap.Pixel(0, -30)});
        //点击事件
        let markerClick = (e) => {
            console.log(e)
            let content = `<div><b>电站名称：</b>${e.target.content}</div>`;
            let id = e.target.G.extData.id;
            axios.post(`/api/stubGroup/map/detail`, {...{stubGroupId: id}}).then(res => {
                console.log(content)
                if (res&&res.data) {
                    content += `<div><b>电站地址：</b>${res.data.address}</div>
                            <div><b>直流设备：</b>${res.data.dcCount}个</div>
                            <div>空闲：${res.data.dcFree}/充电：${res.data.dcCharging}/故障：${res.data.dcFault}/离线：${res.data.dcOff}/其他：${res.data.dcOther}</div>
                            <div><b>交流设备：</b>${res.data.acCount}</div>
                            <div>空闲：${res.data.acFree}/充电：${res.data.acCharging}/故障：${res.data.acFault}/离线：${res.data.acOff}/其他：${res.data.acOther}</div>
                             `
                    infoWindow.setContent(content);
                }
            })
            infoWindow.setContent(content);
            infoWindow.open(this.state.map, e.target.getPosition());
        }
        for (let i = 0; i < lnglats.length; i++) {
            let marker = new window.AMap.Marker({
                position: lnglats[i],
                map: this.state.map,
                autoMove: true,
                extData: nextProps[i],
            });
            marker.content = nextProps[i].name;
            // marker.extData.id = nextProps[i].id;
            marker.on('click', markerClick);
            //默认只触发第一个
            if (i === 0) {
                marker.emit('click', {target: marker});
            }
        }
        //选取城市后取消高德地图自适应
        if (this.count === 0) {
            this.state.map.setFitView();
        } else {
            this.state.map.setCity(data[1]?data[1]:data[0])
        }
        this.count++;
    }

    getStubGroupByMap = (data = []) => {
        let param = {
            "province": data[0],
            "city": data[1]
        };
        axios.post('/api/stubGroup/map/qry', {...param}).then(res => {
            if (res&&res.data) {
                this.setState({
                    params: res.data,
                }, () => {
                    this.freshMap(this.state.params,data)
                });
            }
        })
    }

    render() {
        return (
            <div style={{position: 'relative'}}>
                <Row type="flex" justify="end" style={{position: 'absolute', right: '4%', top: '3%', zIndex: 9999}}>
                    <PickCity level1={{url:'/api/province/option'}} level2={{url:'/api/city/option'}}/>
                </Row>
                <div style={{height: `75vh`, marginTop: 15}} id={`container`} ref={'map'}>
                </div>
            </div>
        )
    }
}

stationMap = createForm()(stationMap);
export default injectIntl(stationMap)